<template>  
  <div class="home">  
    <h1>购物车</h1>  
    <a>手机 - ￥{{ phone.price }}- 数量：{{ phone.quantity }}</a>  
    <button @click="increment('phone')">+</button>  
    <button @click="decrement('phone')">-</button><br>  
    <a>电脑 - ￥{{ computer.price }}- 数量：{{ computer.quantity }}</a>  
    <button @click="increment('computer')">+</button>  
    <button @click="decrement('computer')">-</button><br>  
    <a>键盘- ￥{{ keyboard.price }}- 数量：{{ keyboard.quantity }}</a>  
    <button @click="increment('keyboard')">+</button>  
    <button @click="decrement('keyboard')">-</button><br>  
    <a>总价：￥{{ totalPrice }}</a>  
  </div>  
</template>  
  
<script>  
import { mapState, mapMutations } from 'vuex';  
  
export default {  
  computed: {  
    ...mapState(['cart', 'totalPrice']),  
    phone() {  
      return this.cart.phone;  
    },  
    computer() {  
      return this.cart.computer;  
    },  
    keyboard() {  
      return this.cart.keyboard;  
    }  
  },  
  methods: {  
    ...mapMutations(['INCREMENT_ITEM', 'DECREMENT_ITEM']),  
    increment(item) {  
      this.INCREMENT_ITEM({ item, quantity: 1 });  
    },  
    decrement(item) {  
      this.DECREMENT_ITEM({ item, quantity: 1 });  
    }  
  },  
  mounted() {  
  }  
};  
</script>  
  
<style scoped>  
</style>